// 初始化当前页码、每页显示的商品数量和总商品数量
let current = 1; // 当前页码
let pageSize = 12; // 每页显示的商品数量
let total = 0; // 总商品数量

// 获取页面上的DOM元素
const goodsContainer = document.querySelector(".goods-container"); // 商品容器元素
const currentPageInput = document.querySelector(".current-page"); // 当前页码输入框
const totalPagesSpan = document.querySelector(".total-pages"); // 总页数显示元素
const pageSizeSelect = document.querySelector(".page-size"); // 每页显示商品数量选择器

// 异步加载商品列表
async function loadGoods() {
  try {
    // 发起HTTP GET请求，获取商品列表数据
    const res = await http.get("/goods/list", {
      params: {
        current, // 当前页码
        pagesize: pageSize, // 每页显示的商品数量
      },
    });

    // 如果响应数据中的code字段为1，表示获取成功
    if (res.data.code === 1) {
      // 渲染商品列表
      renderGoods(res.data.list);
      // 更新总商品数量
      total = res.data.total;
      // 更新页面上显示的总页数
      totalPagesSpan.textContent = Math.ceil(total / pageSize);
    }
  } catch (error) {
    // 如果在请求过程中发生错误，输出错误信息
    console.error("获取商品列表失败:", error);
  }
}

// 渲染商品列表到页面上
function renderGoods(goodsList) {
  // 清空商品容器的内容
  goodsContainer.innerHTML = goodsList
    .map(
      (goods) => `
    <div class="goods-item" onclick="location.href='./detail.html?id=${
      goods.goods_id
    }'">
      ${
        goods.is_sale
          ? `<span class="tag sale-tag">折扣</span>`
          : ""
      }
      ${goods.is_hot ? '<span class="tag hot-tag">热销</span>' : ""}
      <img src="${goods.img_big_logo}" alt="${goods.title}">
      <div class="goods-title">${goods.title}</div>
      <div class="price-info">
        <span class="current-price">￥${goods.current_price}</span>
        <span class="original-price">￥${goods.price}</span>
      </div>
    </div>
  `
    )
    .join(""); // 将生成的HTML字符串连接起来，赋值给商品容器
}

// 为分页控件添加事件监听器
document.querySelector(".first-page").addEventListener("click", () => {
  current = 1; // 设置当前页码为第一页
  currentPageInput.value = current; // 更新当前页码输入框的值
  loadGoods(); // 重新加载商品列表
});

document.querySelector(".prev-page").addEventListener("click", () => {
  if (current > 1) { // 如果当前页码不是第一页
    current--; // 页码减一
    currentPageInput.value = current; // 更新当前页码输入框的值
    loadGoods(); // 重新加载商品列表
  }
});

document.querySelector(".next-page").addEventListener("click", () => {
  const maxPage = Math.ceil(total / pageSize); // 计算最大页码
  if (current < maxPage) { // 如果当前页码不是最后一页
    current++; // 页码加一
    currentPageInput.value = current; // 更新当前页码输入框的值
    loadGoods(); // 重新加载商品列表
  }
});

document.querySelector(".last-page").addEventListener("click", () => {
  current = Math.ceil(total / pageSize); // 设置当前页码为最后一页
  currentPageInput.value = current; // 更新当前页码输入框的值
  loadGoods(); // 重新加载商品列表
});

document.querySelector(".jump-to").addEventListener("click", () => {
  const inputPage = parseInt(currentPageInput.value); // 获取用户输入的页码
  const maxPage = Math.ceil(total / pageSize); // 计算最大页码
  if (inputPage >= 1 && inputPage <= maxPage) { // 如果输入的页码有效
    current = inputPage; // 更新当前页码
    loadGoods(); // 重新加载商品列表
  } else {
    alert("请输入有效的页码！"); // 提示用户输入有效的页码
    currentPageInput.value = current; // 还原当前页码输入框的值
  }
});

// 监听每页显示商品数量选择器的变化
pageSizeSelect.addEventListener("change", (e) => {
  pageSize = parseInt(e.target.value); // 更新每页显示的商品数量
  current = 1; // 重置当前页码为第一页
  currentPageInput.value = current; // 更新当前页码输入框的值
  loadGoods(); // 重新加载商品列表
});

// 页面加载时初始加载商品列表
loadGoods();